<template>
	<view class="content">
	<view class="margin padding bg-white">
		<view class="title cu-tag light bg-black ">基本信息</view>
		<view class="padding solids">
			<view class="flex solid-bottom padding justify-left align-center">
				<view class="text">采集项目名：</view>
				<input maxlength="-1" style="width: 30%;" v-model="project_name" class="input" placeholder="">
			</view>
			<view class="flex solid-bottom padding justify-left align-center">
				<view class="text">采集页面编码：</view>
				<radio-group class="block" @change="encodeChange">
					<radio style="font-size: 20upx;" class='radio margin' :class="encode=='GB2312'?'checked':''" :checked="encode=='GB2312'?true:false" value="GB2312">
						GB2312
					</radio>
					<radio style="font-size: 20upx;" class='radio margin' :class="encode=='UTF-8'?'checked':''" :checked="encode=='UTF-8'?true:false" value="UTF-8">
						UTF-8
					</radio>
					<radio style="font-size: 20upx;" class='radio margin' :class="encode=='None'?'checked':''" :checked="encode=='None'?true:false" value="None">
						None
					</radio>
				</radio-group>
			</view>
		</view>
	</view>
	
	<view  class="margin padding bg-white">
		<view class="title cu-tag light bg-black ">网页采集</view>
		<view class="padding solids">
			<view class="flex solid-bottom padding justify-left align-center">
				<view class="text">网页类型：</view>
					<radio-group class="block" @change="radioChange">
						<radio class='radio margin subtext' :class="radio=='mono'?'checked':''" :checked="radio=='mono'?true:false" value="mono">
							单一网页
						</radio>
						<radio class='radio margin subtext' :class="radio=='multi'?'checked':''" :checked="radio=='multi'?true:false" value="multi">
							多个网页
						</radio>
						<radio class='radio margin subtext' :class="radio=='series'?'checked':''" :checked="radio=='series'?true:false" value="series">
							序列网页
						</radio>
					</radio-group>
				</view>
				
				<view class="flex solid-bottom padding justify-left align-center">
					<view class="text">输入采集地址:</view>
					<input maxlength="-1" style="width: 60%;" v-model="address" class="input margin" placeholder-style="color:#AAAAAA" placeholder="eg : https://top.baidu.com/board?tab=realtime">
					<button id="button" class="cu-btn margin lg bg-gradual-red" @click="testifyUrl">测试</button>
				</view>
				<view class="flex solid-bottom padding justify-left align-center" >
					<view class="text">多余信息:</view>
					<input maxlength="-1" style="width: 30%;"  v-model="surplus" class="input margin" placeholder-style="color:#AAAAAA" placeholder='eg:<div class="newNavBg"> ...</div>'>
				</view>
				<!-- 单页信息抓取 -->
				<view class="flex solid-bottom padding justify-left align-center" v-if="radio=='mono'">
					<view class="text">过滤条件:</view>
					<input maxlength="-1" style="width: 30%;"  v-model="filter" class="input margin" placeholder-style="color:#AAAAAA" placeholder='eg : <a class="title_dIF3B" >国台办回应... </a>'>
				</view>
				<!-- 二级页面抓取 -->
				<view class="flex solid-bottom padding justify-left align-center" v-if="radio=='multi'">
					<view class="text">网址url规则:</view>
					<input maxlength="-1" style="width: 50%;" v-model="secondPagReg" class="input margin" placeholder-style="color:#AAAAAA" placeholder="网址间使用分号断开。eg : politics.people.com.cn;society.people.com.cn">
					<view class="title">相对路径:</view>
					<!-- <switch @change="isRelativePath" :class="isRelative?'checked':''" :checked="isRelative?true:false"></switch> -->
					<input  maxlength="-1" style="width: 20%;" v-model="preUrl" class="input margin" placeholder-style="color:#AAAAAA" placeholder="请填写链接前缀域名"/>
				</view>
				
				<view class="flex solid-bottom padding justify-left align-center" v-if="radio=='multi'">
					<view class="text">二级页面文章内容抓取式样:</view>
					<input maxlength="-1" style="width: 30%;" v-model="secondPageClass" class="input margin" placeholder-style="color:#AAAAAA" placeholder="样式间使用分号断开。eg : class1;class2;class3">
				</view>
				<view class="flex solid-bottom padding justify-left align-center" v-if="radio=='multi'">
					<view class="text">二级页面文章标题抓取式样:</view>
					<input maxlength="-1" style="width: 30%;" v-model="titleClass" class="input margin" placeholder-style="color:#AAAAAA" placeholder="样式间使用分号断开。eg : class1;class2;class3">
					<a margin-left href="#" @click="downloadFile">下载模板</a>
				</view>
				
		</view>
	</view>
		
	<view class="margin padding bg-white text-center">
		<button class="cu-btn margin lg bg-gradual-red" :disabled="address==''" @click="execute" >提交</button>
	</view>
		
	<view class="margin padding bg-white">
		<view class="padding solids">
	<!-- 			网址类型： -->
		<view class="title cu-tag light bg-black ">采集结果</view>
		</view>
	</view>
	
	<!--  mono  -->
	<view class="margin bg-shadeBottom padding bg-white text-center" v-if="radio=='mono'" >
		<!-- results: -->

		<view>
			<uni-table :loading="mono_loading" stripe border emptyText="..." >
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">内容</uni-th>
				</uni-tr>
				
				<uni-tr v-for="(item,i) in showConfigs" :key='i'>
					<uni-td v-text="i+1" align="center"></uni-td>
					<uni-td v-text="item" align="center"></uni-td>
				</uni-tr>
			</uni-table>
	
			<view class="example-body margin" >
				<uni-pagination @change="changPage"  title="过滤结果" show-icon="true" :total="configs.length" :current="pageNo"></uni-pagination>
			</view>
		</view>
	</view> 
	
	<!--  multi  -->
	<view class="margin padding bg-shadeBottom text-center" v-if="radio=='multi'">
		<button :disabled="showConfigs_2.length==0?true:false" class="cu-btn margin lg bg-gradual-red " v-if="radio=='multi'"  @click="saveDB">存入数据库</button>
		<view >
			<uni-table :loading="multi_loading" ref="table" stripe border emptyText="..." >
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">地址</uni-th>
					<uni-th align="center">标题/内容</uni-th>
					<uni-th align="center">图片/视频</uni-th>
					<!-- <uni-th align="center">视频</uni-th> -->
				</uni-tr>
				
				<uni-tr v-for="(item,i) in showConfigs_2" :key='i'>
					<uni-td v-text="i+1" align="center"></uni-td>
					<uni-td align="center">
						<a :title="item.url" :href="item.url" class="margin" v-if="item.url">
							{{item.url.substring(0,100) + '......'}}
						</a>
					</uni-td>
					<uni-td align="center">
							<h3>{{item.title}}</h3>
							<view :title="item.article" class="margin" v-if="item.article">{{item.article.substring(0,130) + '......'}}</view>
					</uni-td>
					<uni-td align="left">
						<view>图片地址：</view>
						<view v-for="(img,index) in item.image">
							<text>{{img}}</text>
						</view>
						<view>视频地址：</view>
						<view v-for="(video,index) in item.video">
							<text>{{video}}</text>
						</view>
					</uni-td>
					<!-- <uni-td align="center">
						<view v-for="(video,index) in item.video">
							<text>{{video}}</text>
						</view>
					</uni-td> -->
				</uni-tr>
			</uni-table>
			<view class="example-body margin" >
				<uni-pagination @change="changPage_2"  title="过滤结果" show-icon="true" :total="configs_2.length" :current="pageNo_2"></uni-pagination>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				project_name: '',
				radio:"mono",
				encode:"None",
				address:"",
				filter:"",
				surplus:"",
				secondPagReg:"",
				secondPageClass:"",
				titleClass:"",
				tag_names:[],
				// mono 单页
				mono_loading:false,
				configs: [],
				pageNo: 1,
				pageSize: 10,
				showConfigs: [],
				allPageNo:1,
				//multi 多页
				multi_loading:false,
				configs_2:[],
				showConfigs_2:[],
				pageNo_2: 1,
				pageSize_2: 10,
				allPageNo_2: 1,
				// 链接是否是相对路径
				isRelative:false,
				preUrl:""
			}
		},
		onLoad() {
			
			// 请求格式
			// uni.request({
			// 	url:"http://127.0.0.1:8000/panel/",
			// 	method:'POST',
			// 	data:{
			// 		'url':"https://top.baidu.com/board?tab=realtime",
			// 		'filter':"<a class="title_dIF3B " target="_blank"> 国台办回应日本防卫白皮书提及台湾 <div class="c-text c-text-hot_3ZhI9 hot-tag_1G080"> 热 </div><!--40--></a>",
			// 		'encode':""
			// 	},
			// 	header:{
			// 		'Content-Type':"application/x-www-form-urlencoded"
			// 	},
			// 	success(res){
			// 		console.log(res)
			// 	},
			// 	fail(res) {
			// 		console.log(res)
			// 	}
			// })
			
			//deep dig
			// uni.request({
			// 	url:"http://127.0.0.1:8000/panel/deepDig/",
			// 	method:"POST",
			// 	data:{
			// 		'url':"http://news.people.com.cn/",
			// 		'content_class':["l-con",'clear'],
			// 		"secondPagReg":['politics.people.com.cn','society.people.com.cn'],
			//		"surplus":"<div class="newNavBg"></div><div class="indexTitle"></div><div class="newMoreNav"></div><div class="newNavBg"></div><div class="footNew"></div><div class="indexBTitle"></div>"
			// 		'encode':"GB2312"
			// 		},
			// 	header:{
			// 		'Content-Type':"application/x-www-form-urlencoded"
			// 		},
			// 	success(res){
			// 		console.log(res)
			// 		},
			// 	fail(res) {
			// 		console.log(res)
			// 		}
			// 	})
		},
		methods: {
			radioChange:function(e) {
				this.radio = e.detail.value
			},
			encodeChange:function(e){
				this.encode = e.detail.value
			},
			testifyUrl:function(e){
				console.log(this.address+"===============")
				uni.request({
					url:"http://127.0.0.1:8000/panel/isValid/",
					data:{
						url : this.address
					},
					success(res) {
						console.log(res.data)
						if(res.data.isValid){
							uni.showToast({
								icon:"success",
								title:"合法地址"
							})
						}else{
							uni.showToast({
								title:"不合法的地址",
								icon:"none"
							})
						}
					},
					fail(res){
						console.log(res.data)
					}
				})
				
			},
			
			execute(){
				let _this = this
				switch(this.radio){
					case 'mono':
						this.mono_loading = true
						this.configs = []
						this.showConfigs = []
						uni.request({
							url:"http://127.0.0.1:8000/panel/",
							method:'POST',
							data:{
								'url':_this.address,
								'filter':_this.filter,
								"surplus":_this.surplus,
								'encode':_this.encode=='None'?'':_this.encode
							},
							header:{
								'Content-Type':"application/x-www-form-urlencoded"
							},
							success(res){
								_this.mono_loading = false
								console.log(res.data)
								_this.tag_names = res.data['tag_list']
								_this.pageNo = 1
								//将所有标签后的数据存到configs数组中\
								_this.configs = []
								for(let i = 0 ; i < _this.tag_names.length ; i++){
									_this.configs = _this.configs.concat(res.data[_this.tag_names[i]])
								} 
								//计算总页数
								if((_this.configs.length)%_this.pageSize == 0){
									if(_this.configs.length != 0){
										_this.allPageNo = parseInt((_this.configs.length)/_this.pageSize);
									}
								}
								if((_this.configs.length)%_this.pageSize != 0){
									_this.allPageNo = parseInt((_this.configs.length)/_this.pageSize) + 1;
								}
								
								//给showConfigs赋初始值，也就是第一页的数据
								_this.showConfigs=_this.configs.slice(0,_this.pageSize)
								
								console.log(_this.tag_names)
							},
							fail(res) {
								_this.mono_loading = false
								console.log(res.data)
							}
						})
						break;
					case 'multi':
					// deep dig
					this.configs = []
					this.showConfigs_2 = []
					this.multi_loading = true
						uni.request({
							url:"http://127.0.0.1:8000/panel/deepDig/",
							method:"POST",
							data:{
								'url':this.address,
								'content_class':this.secondPageClass.split(';'),
								"secondPagReg":this.secondPagReg.split(";"),
								"title_class":this.titleClass.split(";"),
								"surplus":this.surplus,
								'encode':this.encode,
								'preUrl':this.preUrl.trim()
								},
							header:{
								'Content-Type':"application/x-www-form-urlencoded"
								},
							success(res){
								_this.multi_loading = false
								console.log(res.data)
								_this.configs_2 = res.data['contents']

								//计算总页数
								if((_this.configs_2.length)%_this.pageSize_2 == 0){
									if(_this.configs_2.length != 0){
										_this.allPageNo_2 = parseInt((_this.configs_2.length)/_this.pageSize_2);
									}
								}
								if((_this.configs_2.length)%_this.pageSize_2 != 0){
									_this.allPageNo_2 = parseInt((_this.configs_2.length)/_this.pageSize_2)+1;
								}
								//showConfigs_2赋初始值
								_this.showConfigs_2 = _this.configs_2.slice(0,_this.pageSize_2);
								
								},
							fail(res) {
								_this.multi_loading = false
								console.log(res)
								}
							})
						break;
						
				}
				
			},
			
			changPage:function(event){
				console.log("changePage : currentPage = " + event.current) 
				this.pageNo = event.current
				this.showConfigs = this.configs.slice((this.pageNo-1)*this.pageSize,(this.pageNo-1)*this.pageSize+10)
			},
			changPage_2:function(event){
				this.pageNo_2 = event.current
				this.showConfigs_2 = this.configs_2.slice((this.pageNo_2-1)*this.pageSize_2,(this.pageNo_2-1)*this.pageSize_2+10)
			},
			
			isRelativePath:function(e){
				this.isRelative = e.detail.value
				this.preUrl = ""
			},
			saveDB:function(e){
				uni.showModal({
					title:"confirm",
					content: '是否写入数据库',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认",
					success: (res) => {
						console.log(this.configs_2)
						if(res.confirm){
							uni.request({
								url:"http://127.0.0.1:8000/panel/saveDB/",
								method:"POST",
								header:{
									'Content-Type':"application/json"
									},
								data:{
									"articles":this.configs_2,
								},
								success(res) {
									console.log(res.data)
									if(res.data.result){
										uni.showToast({
											icon:"none",
											title:"数据库写入失败"
										})
									}else{
										uni.showToast({
											title:"数据库写入成功"
										})
									}
								}
							})
						}
					}
				})
			},
			downloadFile:function(){
				if(this.address!=""&&this.surplus!=""&&this.secondPageClass!=""&&this.titleClass!=""){
					uni.request({
						url:"http://127.0.0.1:8000/panel/change_template/",
						method:'POST',
						data:{
							'pro_name':this.project_name,
							'url':this.address,
							'content_class':this.secondPageClass,
							"secondPagReg":this.secondPagReg,
							"title_class":this.titleClass,
							"surplus":this.surplus,
							'encode':this.encode,
							'preUrl':this.preUrl.trim()
						},
						header:{
							'Content-Type':"application/x-www-form-urlencoded"
						},
						success(res){
							console.log(res)
							window.location.href = "http://127.0.0.1:8000/panel/download_file/"
						},
						fail(res) {
							console.log(res)
						}
					})
					
				}else{
					uni.showToast({
						title:"请完善必要信息",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* justify-content: center; */
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		position: relative;
		top:0rpx;
		left: 0rpx;
		z-index: 50;
		font-size: 32rpx;
	}
	.text{
		font-size: 32rpx;
	}
	.subtext{
		font-size: 20upx;
	}
	.input{
		height: 80rpx;
		border-style: solid;
		border-color:#EEEEEE;
		font-size: 36rpx;
	}
</style>
